<template>
  <div class="hot">
    <div class="hot-title">
      <div class="hot-title-left">
        <img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="本周热门榜单"> 本周热门榜单
      </div>
      <div class="hot-title-right">
        全部榜单<span class="iconfont iconyoujiantou"></span>
      </div>
    </div>
    <ul class="hot-list">
      <li class="hot-item" v-for="hot of hotList" :key="hot.id">
        <img :src="hot.imgUrl" :alt="hot.title">
        <p class="hot-item-title">
          {{ hot.title }}
        </p>
        <p class="price"><span>￥{{ hot.price }}</span>起</p>
      </li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
    export default {
      props:{
        hotList:{
          type:Array,
          default:[]
        }
      },
      data(){
        return{

        }
      }
    }
</script>
<style lang="stylus" rel="text/stylus" scoped>
  @import "~css/common.styl"
  .hot
    margin-top:.2rem
    background-color: #fff
    font-size: .24rem
    .hot-title
      position: relative
      padding:.4rem
      .hot-title-left
        font-size: .32rem
        img
          width: .3rem
          height: .3rem
      .hot-title-right
        color:#616161
        font-size: .24rem
        position: absolute
        top: 0.4rem
        right:.2rem
    .hot-list
      padding:.06rem 0 .2rem .2rem
      white-space:nowrap
      overflow-x:scroll
      overflow-y:hidden
      height: 3rem
      .hot-item
        display: inline-block
        width:2rem
        margin-right:.13rem
        text-align: center
        position: relative
        &:nth-child(1):before
          $imgTop('//img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png')
        &:nth-child(2):before
          $imgTop('http://img1.qunarzz.com/piao/fusion/1710/2d/36d0c4adaebbbc02.png')
        &:nth-child(3):before
          $imgTop('http://img1.qunarzz.com/piao/fusion/1710/67/edc47ffef9e96b02.png')
        &:last-child
          margin-right: 0
        img
          width: 2rem
          height: 2rem
        .hot-item-title
          margin: .12rem 0
          line-height: .32rem
          $txtOverflow()
        span
          font-size: .28rem
          color:#ff8300
</style>
